import React , { useState } from 'react'
import './system_scss/index.css'

//侧边栏
import { Sidebar, Toast } from 'react-vant';
//按钮
import { Button } from 'react-vant';



type Props = {}

const Index = (props: Props) => {

  //侧边tab切换
  const [active, setActive] = useState(0);



  return (
    <div>
          <h3><span>工作台/</span>系统设置</h3>

          {/* 内容 */}
        <div className="system_div">


        <Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
        // Toast.info(`内容区 ${v + 1}`);
      }}
    >
      <Sidebar.Item contentStyle={{ padding: '18px 30px' , overflow:'auto'}} title="系统设置">
              <p>系统地址</p>
              <input type="text" value='www.com'/>
              <p>后台地址</p>
              <input type="text" value='creationadmin.shbwyz.com'/>
              <p>系统标题</p>
              <input type="text" value='八维创作平台管理系统'/>
              <p>Logo</p>
              <input type="text" value='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'/>
              <p>Favicon</p>
              <input type="text" value=' https://alex-mahone.oss-cn-beijing.aliyuncs.com/images/d0d3369ce29d9510ad9d8e000.jpg'/>
              <p>页脚信息</p>
              <input type="text" value='Copyright @ 2022 Designed by Fantasticit.'/>
              <div className="demo-button">
                  <Button type="primary">保存</Button>
                </div>
      </Sidebar.Item>


      <Sidebar.Item contentStyle={{ padding: '18px 30px' , overflow:'auto'}} title="国际化设置">
        <p> <div className="demo-button">
                  en <Button type="primary">+</Button>
            </div>
        </p>
              {/* <input type="text"  name='username'/> */}
              <textarea name="" id="" style={{height:'100%',width:'100%'}}  value='
                      {
                        "zh": "Chinese",
                        "en": "English",
                        "serverNotAvaliable": "The server is going to launch a rocket for Musk now 🚀",
                        "pageMissing": "This page went to space with Bezos",
                        "archives": "Archives",
                        "total": "Total",
                        "totalSearch": "Totally searched ",
                        "piece": " Count",
                        "passwd": "Password",
                        "wrongPasswd": "Wrong Password",
                        "protectedArticleMsg": "The article is protected, please enter the access password",
                        "backHome": "Back to Home",
                        "confirm": "Confirm",
                        "unknownTitle": "Unknown Title",
                        "articleCover": "Article Cover",
                        "publishAt": "Publish At",
                        "readings": "Reading",
                        "copyrightInfo": "Copyright Information",
                        "copyrightContent": "Non-commercial-Attribution-Freely Reprinted",
                        "categoryArticle": "Category",
                        "gettingArticle": "Fetching articles...",
                        "comment": "Comment",
                        "gettingKnowledge": "Fetching knowledge books...",
                        "knowledgeBooks": "Knowledge Books",
                        "readingCount": "reading",
                        "startReading": "Start Reading",
                        "pleaseWait": "Coming soon",
                        "otherKnowledges": "Other Knowledge Books",
                        "unknownKnowledgeChapter": "Unknown Chapter",
                        "recommendToReading": "Recommended Readings",
                        "yu": "About",
                        "tagRelativeArticles": "tag related articles",
                        "all": "All",
                        "readingCountTemplate": "reading",
                        "articleCountTemplate": "count",
                        "share": "Share",
                        "empty": "No data",
                        "categoryTitle": "Category",
                        "commentNamespace": {
                          "reply": "Reply",
                          "emoji": "Emoji",
                          "replyPlaceholder": "Please enter the content of the comment (Markdown is supported)",
                          "publish": "Send",
                          "close": "Close",
                          "commentSuccess": "The comment is successful and has been submitted for review",
                          "userInfoTitle": "Please set your information",
                          "userInfoName": "Username",
                          "userInfoNameValidMsg": "Please tell me your name",
                          "userInfoEmail": "Email",
                          "userInfoEmailValidMsg": "Please enter correct email",
                          "userInfoConfirm": "Save",
                          "userInfoCancel": "Cancel"
                        },
                        "loading": "Loading",
                        "copySuccess": "Copy successfully",
                        "copy": "copy",
                        "article": "Articles",
                        "searchArticle": "Search Articles",
                        "searchArticlePlaceholder": "Enter keywords, search articles",
                        "shareNamespace": {
                          "title": "Share Poster",
                          "createingPoster": "The poster is being generated, please be patient...",
                          "createdPosterSuccess": "The poster is completed.",
                          "createdPosterError": "Fail to generate poster.",
                          "qrcode": "Scan the QR code to read the article",
                          "shareFrom": " Original shared from "
              ' ></textarea>
      </Sidebar.Item>


      <Sidebar.Item contentStyle={{ padding: '18px 30px' , overflow:'auto' }} title="SEO设置">
              <p>关键词</p>
              <input type="text" value='JavaScript,TypeScript,Vue.js,微信小程序,React.js,正则表达式,WebGL,Webpack,Docker,MVVM,nginx,java"。'/>

                  <p>描述信息</p>
              <textarea name="" id="" style={{width:'100%',height:'200px'}} value='
                        "seoDesc": "“小楼又清风”是 fantasticit（https://github.com/fantasticit）的个人小站。本站的文章包括：前端、后端等方面的内容，也包括一些个人读书笔记。
              ' ></textarea>
               <div className="demo-button">
                  <Button type="primary">保存</Button>
                </div>
      </Sidebar.Item>


      <Sidebar.Item contentStyle={{ padding: '18px 30px' , overflow:'auto' }} title="数据统计">
               <p>百度统计</p>
              <input type="text" value='2f616121a4be61774c494d106870f30e'/>
              <p>谷歌分析</p>
              <input type="text" value='G-10SK76KWMSS'/>
              <div className="demo-button">
                  <Button type="primary">保存</Button>
                </div>
      </Sidebar.Item>


      <Sidebar.Item contentStyle={{ padding: '18px 30px' , overflow:'auto' }} title="OSS设置">
        <p>
          <span>说明</span><br />
          <input type="text"  value='说明
                请在编辑器中输入您的 oss 配置，并添加 type 字段区分 {"type":"aliyun","accessKeyId":"","accessKeySecret":"","bucket":"","https":true,"region":""}'/>
        </p>
        <textarea name="" id="" style={{width:'100%' , height:'200px'}} value='{
                "type": "aliyun",
                "accessKeyId": "LTAI5tNCi2X6P8HsPC2z1DzU",
                "accessKeySecret": "EVgAOywaLuufXuPUKBSo2Zeii5TkJk",
                "bucket": "alex-mahone2",
                "https": true,
                "region": "oss-cn-beijing"
              }'></textarea>
      </Sidebar.Item>


      <Sidebar.Item contentStyle={{ padding: '18px 30px' , overflow:'auto' }} title="SMTP服务">
              <p>SMTP 地址</p>
              <input type="text" value='stmp.qq.com'/>
              <p>SMTP 端口（强制使用 SSL 连接）</p>
              <input type="text" value='465'/>
              <p>SMTP 用户</p>
              <input type="text" value='sadasdsa'/>
              <p>SMTP 密码</p>
              <input type="text" value='weqweasd'/>
              <p>发件人</p>
              <input type="text" value='2544612178@qq.com'/>
              <div className="demo-button">
                  <Button type="primary">保存</Button>
                </div>
      </Sidebar.Item>
    </Sidebar>

        </div>
    </div>
  )
}

export default Index
